<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    <child ></child>
    <child my-message="nihao"></child>

    <!-- 动态给组件传递值 -->
    <input type="text" v-model="dongtai">
    <child2 v-bind:my-message="dongtai"></child2>
</div>
<script>
    Vue.component("child", {
        props: {
            //验证
            myMessage: {
                type: String, //多种验证以数组形式 [String, Number]
                required: true,
                default : '默认值' // 默认值可以以方法的形式 function {return '';}
            }
        },
        template: '<div>{{myMessage}}</div>'
    })

    Vue.component("child2", {
        props: ['myMessage'],
        template: '<div>{{myMessage}}</div>'
    })

    new Vue({
        el: "#app",
        data: {
            dongtai: ''
        }
    })
</script>
</body>
</html>